{% extends 'sys_manage.html' %}
{% block customcss %}
    {{ block.super }}
    <style>
        #mulu .sanjimulu {
            padding-left: 40px;
        }
    </style>
{% endblock %}
{% block table %}
    <div class="demoTable">
        搜索用户名：
        <div class="layui-inline">
            <input class="layui-input" name="search" id="search" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload" id="search_btn">搜索</button>
        <button style="float: right" data-method="offset" id="add_user" data-type="auto"
                class="layui-btn layui-btn-normal">新增用户
        </button>
    </div>
    <table class="layui-table"
           lay-data="{url:'/user/user_info/?level_id={{ level_id }}&dir_id={{ dir_id }}', text:{none:'当前暂无信息'},page:true,limit:10, id:'user_table'}"
           lay-filter="user">
        <thead>
        <tr>
            {#            <th lay-data="{type:'checkbox', fixed: 'left'}"></th>#}
            <th lay-data="{field:'id', width:80, sort: true, fixed: true}">序号</th>
            <th lay-data="{field:'username', width:140}">用户名</th>
            <th lay-data="{field:'role', width:100}">角色</th>
            <th lay-data="{field:'dir', width:140}">部门</th>
            <th lay-data="{field:'operator', width:140}">操作人</th>
            <th lay-data="{field:'status', width:70, templet: '#status'}">状态</th>
            <th lay-data="{field:'update_time', width:160, sort: true}">修改时间</th>
            <th lay-data="{fixed: 'right', width:163, align:'center', toolbar: '#operate_bar'}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="status">
        {% verbatim %}
        {{#  if(d.status == 0){ }}
        <i class="layui-icon" style="color: green" title="正常">&#xe617;</i>
        {{#  } else if(d.status == 1) { }}
        <i class="layui-icon" style="color: red" title="已删除">&#xe617;</i>
        {{#  } }}
        {% endverbatim %}
    </script>
    <script type="text/html" id="operate_bar">
        <a class="layui-btn layui-btn-xs" id="edit_user" data-method="edit_user" data-type="auto"
           lay-event="edit_user" title="编辑"><i class="layui-icon">&#xe642;</i></a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" title="密码重置" lay-event="reset_pwd"><i class="layui-icon">&#xe669;</i></a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="状态变更"><i
                class="layui-icon">&#xe640;</i></a>
    </script>
    {#    数据添加的form表单#}
    <div class="layui-row" id="add_user_form" style="display: none; padding: 10px">
        <div class="layui-col-md10">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名<i class="require_i">*</i></label>

                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="username" placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                    {#                    <div class="layui-form-mid layui-word-aux">辅助文字</div>#}
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="password" placeholder="请输入密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="telephone" placeholder="请输入手机号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <select name="role" lay-verify="required">
                            <option value=""></option>
                            {#                            <option value="0">超级管理员</option>#}
                            <option value="1">管理员</option>
{#                            <option value="2">访客</option>#}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    {#                    根目录=部门#}
                    <label class="layui-form-label">部门<i class="require_i">*</i></label>
                    <div class="layui-input-inline">
                        {#                        <select name="dir" lay-verify="required">#}
                        <select name="dir" lay-verify="required">
                            {#                            数据要从数据库获取回显#}
{#                            <option value="0"></option>#}
                            <option value="">请选择部门</option>
                            {% for dir in dirs %}
                                <option value="{{ dir.id }}">{{ dir.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">部门即根目录</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="add_user_submit">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {#    数据回显的form表单#}
    <div class="layui-row" id="edit_user_form" style="display: none; padding: 10px">
        <div class="layui-col-md10">
            <form class="layui-form" lay-filter="edit_user">
                <input type="hidden" name="user_id">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="username"
                               placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="telephone" placeholder="请输入手机号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色<i class="require_i">*</i></label>
                    <div class="layui-input-block">
                        <select name="role" lay-verify="required">
                            <option value=""></option>
                            {#                            <option value="0">超级管理员</option>#}
                            <option value="1">管理员</option>
{#                            <option value="2">访客</option>#}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    {#                    根目录=部门#}
                    <label class="layui-form-label">部门<i class="require_i">*</i></label>
                    <div class="layui-input-inline">
                        <select name="dir" lay-verify="required">
                            {#                            数据要从数据库获取回显#}
                            <option value="">请选择部门</option>
{#                            <option value="0"></option>#}
                            {#                            value是dir_id#}
                            {% for dir in dirs %}
                                <option value="{{ dir.id }}">{{ dir.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="layui-form-mid layui-word-aux">部门即根目录</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="edit_user_submit">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block customjs %}
    {{ block.super }}

    <script>
        {% if dir_id %}
            $("#department").addClass("layui-nav-itemed");
            $('#dirs a[dir="{{ dir_id }}"]').addClass('layui-this').css('color', '#fff');
        {% elif level_id %}
            $("#role").addClass("layui-nav-itemed");
            $('#role dl a[level_id="{{ level_id }}"]').addClass('layui-this').css('color', '#fff');
        {% else %}
            $('#all_user a').addClass('layui-this').css({color: '#fff'});
        {% endif %}
        {#        });#}
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var active = {
                // 添加用户按钮点击事件对应的处理方式
                offset: function (othis) {
                    var type = othis.data('type')
                        , text = othis.text();

                    layer.open({
                        type: 1
                        , title: '添加用户'
                        , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: 'add_user' + type //防止重复弹出
                        , content: $('#add_user_form')
                        , area: ['700px', '500px']
                        // , btn: ['保存', '取消']
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                    });

                }
                , edit_user: function (othis) {
                    var type = othis.data('type')
                        , text = othis.text();
                    layer.open({
                        type: 1
                        , title: '编辑用户'
                        , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        , id: 'edit_user' + type //防止重复弹出
                        , content: $('#edit_user_form')
                        , area: ['700px', '500px']
                        // , btn: ['保存', '取消']
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                    });
                } // 点击搜索按钮，重载数据
                , reload: function () {
                    var search = $('#search');
                    //执行重载
                    table.reload('user_table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            search_info: search.val()
                        }
                    });
                }
            };

            // 添加用户按钮点击事件
            $('#add_user').on('click', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
            // 点击搜索按钮事件
            $('#search_btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //监听操作选项的工具条事件
            table.on('tool(user)', function (obj) {
                var data = obj.data;
                if (obj.event === 'reset_pwd') {
                    layer.confirm('密码重置操作不可恢复,确定要重置吗?', function (index) {
                        //向服务端发送重置密码指令
                        $.ajax({
                                type: 'put',
                                url: '/user/user_info/',
                                data: {user_id: data.user_id, option: 'reset_pwd'},
                                dataType: 'json',
                                success: function (data) {
                                    if (data.code === 0) {
                                        layer.alert(data.msg);
                                        layer.close(index);
                                    } else {
                                        layer.alert(data.msg)
                                    }
                                }
                            }
                        )
                    });
                } else if (obj.event === 'del') {
                    if (data.status == 1) {
                        var tip_msg = '确定要恢复该用户吗？'
                            , type = 'put'
                    } else {
                        var tip_msg = '确定要删除该用户吗？'
                            , type = 'delete'
                    }

                    layer.confirm(tip_msg, function (index) {
                        //向服务端发送删除指令
                        $.ajax({
                                type: type,
                                url: '/user/user_info/',
                                data: {user_id: data.user_id},
                                dataType: 'json',
                                success: function (data) {
                                    if (data.code === 0) {
                                        layer.msg(data.msg, {
                                            icon: 6, time: 2000, end: function () {
                                                location.reload()
                                            }
                                        });
                                    } else {
                                        layer.alert(data.msg)
                                    }
                                }
                            }
                        )
                    });
                } else if (obj.event === 'edit_user') {
                    var othis = $(this), method = othis.data('method');
                    active[method] ? active[method].call(this, othis) : '';
                    // 回显数据form表单，一次请求，获取所有数据
                    form.val('edit_user', {
                        "username": data.username
                        , "telephone": data.telephone
                        , "role": data.role_id
                        , "dir": data.dir_id
                        , "user_id": data.user_id
                    });
                }
            });

            var form = layui.form;
            // 自定义表单验证
            form.verify({
                username: [/^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]{4,59}$/, '用户名长度为5-60个字符，只能为数字字母汉字，且不能以数字开头']
                , password: [/^[\S]{6,15}$/, '密码必须6到15位，且不能出现空格']
            });
            //监听新增用户表单提交
            form.on('submit(add_user_submit)', function (data) {
                $.ajax({
                        type: 'post',
                        url: '/user/user_info/',
                        data: data.field,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code === 0) {
                                {#                                alert(data.msg)#}
                                layer.msg(data.msg, {
                                    icon: 6, time: 2000, end: function () {
                                        location.href = '/user/account_manage/'
                                    }
                                });
                            } else {
                                layer.alert('Failed:' + data.msg);
                                return
                            }
                        }
                    }
                );
                return false;
            });
            // 监听修改用户信息表单提交
            form.on('submit(edit_user_submit)', function (data) {
                $.ajax({
                        type: 'put',
                        url: '/user/user_info/',
                        data: data.field,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code === 0) {
                                layer.msg(data.msg, {
                                    icon: 6, time: 2000, end: function () {
                                        location.href = '/user/account_manage/'
                                    }
                                });

                            } else {
                                layer.alert('Failed:' + data.msg);
                            }
                        }
                    }
                );
                return false;
            });
        })
        ;
    </script>
{% endblock %}


